<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
  }
  .all{
    width:100%;
    height:100%;
  }
  .banner{
    height:280px;
    width:100%;
  }
  .vux-swiper-item{
    height:280px;
  }
  .vux-swiper{
     height:280px !important;
  }
  .title{
    margin-top:20px;
    margin-left:0px;
    color:#666;
    font-weight: bold;
    display: inline-block;
  }
  .title:nth-of-type(1){
    margin-top:5px;
  }
  .listText{
    color:#333;
    font-size:12px;
    text-align: center;
    margin:0px;
  }
  .indecIcon{
    width:4.5rem;
    height:4.5rem;
  }
  .weui-grids:before{
    border:0px;
  }
  .weui-grid:after{
    border:0px;
  }
  .weui-grid {
    padding:5px 0px;
    width:25%;
  }

  .box1 {
  height: 100px;
  position: relative;
  width: 600px;
}
.box1-item {
  width: 13.5%;
  height: 100px;
  background-color: #fff;
  display:inline-block;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box1-item[data-v-8a3dcea4]{
  line-height: normal;
}

.box1-1 {
	width:100%;
	height:100px;
	overflow:hidden;

  // background-color:skyblue;
  .wrapper{
    // width:100%;
    height:6em;
    overflow-x:auto;
    overflow-y:hidden;
    padding-left: 0.2em;
    ul{
      width:720px;
      display: flex;
      // display:-webkit-box;
      li{
        // flex:1;
        // float: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:6em;
        height:6em;
        // box-sizing:border-box;
        list-style: none;
        p{
          padding-top: 0.2em;
        }
      }
    }
  }
}
.wrapper ul{
    overflow-y: hidden;
    height: 7rem;
}
</style>



<template>
    <div class="all">
      <swiper :list="bannerList" auto class="banner" height="280px" loop ></swiper>
      <group-title class="title">综合业务</group-title>
      
      <!-- <scroller lock-y :scrollbar-x=false>
        <div class="box1">
          <div class="box1-item" v-for="(item,i) in indexTitle" :key="i" @click="toDetail(item)">
            <img :src="item.u1"  class="indecIcon"/><br/>
            <p class="listText">{{item.t1}}</p>
          </div>
        </div>
      </scroller> -->


      <!-- <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="4">
        <grid-item v-for="(item,i) in indexTitle" class="listText" :key="i" @on-item-click="toDetail(item)">
          <img :src="item.u1"  class="indecIcon"/>     
          <p class="listText">{{item.t1}}</p>
        </grid-item>     
      </grid> -->
      <div class="box1-1 quicken">
        <div id="w1" class="wrapper">
            <ul>
                <li v-for="(item,i) in indexTitle" :key="i" @click="toDetail(item)">
                  <img :src="item.u1"  class="indecIcon"/>
                  <p class="listText">{{item.t1}}</p>
                </li>
            </ul>
        </div>
      </div>
      <group-title class="title">固网业务</group-title>
      <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="4">
        <grid-item v-for="(item,i) in indexTitle2" class="listText" :key="i" @on-item-click="toDetail(item)" style="float:left;">
          <img :src="item.u2"  class="indecIcon"/>     
          <p class="listText">{{item.t2}}</p>
        </grid-item>     
      </grid>

      <group-title class="title">移网业务</group-title>
      <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="4">
        <grid-item v-for="(item,i) in indexTitle3" class="listText" :key="i" @on-item-click="toDetail(item)">
          <img :src="item.u3"  class="indecIcon"/>     
          <p class="listText">{{item.t3}}</p>
        </grid-item>     
      </grid>
    </div>    
</template>

<script>
var myScroll;
  import { Swiper,Group,GroupTitle, Grid, GridItem, Panel,XButton,Marquee, MarqueeItem,Scroller  } from 'vux'
  export default {
    data() {
      return {
        bannerList:[{
            url: 'javascript:',
            img: 'http://business.10010js.com:9001/frontpage/images/banner4.jpg',
            }, {
            url: 'javascript:',
            img: 'http://business.10010js.com:9001/frontpage/images/banner1.jpg',
            },{
            url: 'javascript:',
            img: 'http://business.10010js.com:9001/frontpage/images/banner3.jpg',
            }],
        bannerIndex:0,
        indexTitle:[],
        indexTitle2:[],
        indexTitle3:[]
      }
    },
    mounted(){
      this.indexTitle=this.$blocks.filter(x=>x.t1);
      this.indexTitle2=this.$blocks.filter(x=>x.t2);
      this.indexTitle3=this.$blocks.filter(x=>x.t3);

      // myScroll = new IScroll('.wrapper');
    },
    methods: {
      jump(name){
        this.$router.push({name})
      },
      toList(list){
        console.log("显示内容",this);
        console.log("查看router方法",this.$router.push);
        console.log("显示当前点击获取的数据",list)
        this.$router.push({name:'test',params:list})
      },
      toDetail(item){
        this.$router.push({name:'Detail',params:{id:item.id}})
      }
    },
    components: {
      Swiper,
      GroupTitle,
      Grid, GridItem,
      Panel,
      XButton,
      Marquee, MarqueeItem,Group,GroupTitle,Scroller
    }
  }
</script>

